<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Web Socket Client</title>
	<style>
		*{margin:0;padding:0;}
		body{padding:10px;}
		.main{
			background:#EEE;
			width:800px;
			margin:0 auto;
		}
		.cell{
			width:300px;
			color:#FFF;
			word-wrap: break-word;
		}
		.self{
			width:300px;
			color:#F3F;
			word-wrap: break-word;
		}
		.left{
			width:260px;
			height:472px;
			float:left;
			margin:23px;
			background:#888;
			OVERFLOW-Y:scroll;
			OVERFLOW-X:hidden;
			border:solid 1px #888;
		}
		.right{
			width:400px;
			height:500px;
			float:left;
		}
		.clear{
			clear:both;
		}
		#message{
			OVERFLOW-Y:scroll;
			OVERFLOW-X:hidden;
			border:solid 1px #333;
			padding:4px;
			width:400px;
			background-color:#404040;
			height:273px;
			margin-bottom:8px;
			font-size:14px;
		}
		.userlist{
			width:245px;
			height:35px;
			background:#79F;
			text-align:center;
			line-height:35px;
			border:solid 1px #FFF;
			margin:1px 0;
			position:relative;
		}
		.notiradiu{
			position:absolute;
			width:5px;
			height:5px;
			background:red;
			border-radius:50%;
			top:15px;
			left:5px;
		}
		.baner{
			display:none;
		}
	</style>
</head>

<body>
<div class="main">
	<center>
	<h1>Web Socket Custom Service</h1>
	</center>
	<div class="left" id="left">
		
	</div>
	<div class="right">
		<div style="margin:5px 0px;">
			Name:
			<div><input id="name" type="text" style="width:400px;"/></div>
			pass:
			<div><input id="pass" type="text" style="width:400px;"/></div>
		</div>
		<div>
			<button id="login" onclick="login();">login</button>
			<button id="disconnect" onclick="quit();">disconnect</button>
			<button id="clear" onclick="clearMsg();">clear</button>
		</div>
		<h5 style="margin:4px 0px;">Message:</h5>
		
		<div id="message"></div>
		
		toopenid:
		<div><input id="toopenid" type="text" style="width:340px"/></div>
		msg:
		<div><input id="text" type="text" onkeypress="enter(event);" style="width:340px"/>
		<button id="send" onclick="send();">send</button></div>
	</div>
	<div class="clear"></div>
</div>
<audio id="chatAudio">
	<source src="../Public/audio/Prompt_tone.mp3" type="audio/mpeg">
</audio>
<script type="text/javascript">
	var username=document.getElementById('name');
	var pass=document.getElementById('pass');
	var msgContainer=document.getElementById('message');
	var text=document.getElementById('text');
	
	new connect();
	
	function onchooce(){
		var da = this.dataset.id;
		var toopenid=document.getElementById('toopenid');
		toopenid.value=da;
		this.querySelector('.notiradiu').style.display='none';
		getclass(this,'.userlist');
		getclass2(document.getElementById('baner_'+da),'.baner');
	};
	
	function connect(){
		var address='ws://127.0.0.1:8000';
		
		ws=new WebSocket(address);
		ws.onopen=function(e){
			var msg=document.createElement('div');
			msg.style.color='#0f0';
			msg.innerHTML="Server > connection open.";
			msgContainer.appendChild(msg);
		};
		ws.onmessage=function(e){
			var msg=document.createElement('div');
			var msgObj=JSON.parse(e.data);
			if(!document.getElementById('baner_'+msgObj.fromusername)){
				var baner=document.createElement('div');
				baner.className='baner';
				baner.id='baner_'+msgObj.fromusername;
				msgContainer.appendChild(baner);
			}
			
			var banerid=document.getElementById('baner_'+msgObj.fromusername);
			msg.className='cell';
			msg.innerHTML=msgObj.content;
			banerid.appendChild(msg);
			if(!document.getElementById('left_'+msgObj.fromusername)){
				var userlist=document.createElement('div');
				userlist.id='left_'+msgObj.fromusername;
				document.getElementById('left').appendChild(userlist);
				var userone=document.getElementById('left_'+msgObj.fromusername);
				userone.dataset.id=msgObj.fromusername;
				userone.className='userlist';
				userone.onclick=onchooce;
				
				var notiradiu=document.createElement('div');
				notiradiu.className='notiradiu';
				userone.innerHTML=msgObj.fromusername;
				userone.appendChild(notiradiu);
			}
			if(document.getElementById('baner_'+msgObj.fromusername).style.display=='none'){
				document.getElementById('left_'+msgObj.fromusername).querySelector('.notiradiu').style.display='block';
			}
			document.getElementById('chatAudio').play();
		};
		ws.onerror=function(e){
			var msg=document.createElement('div');
			msg.style.color='#0f0';
			msg.innerHTML='Server > '+e.data;
			msgContainer.appendChild(msg);
		};
		ws.onclose=function(e){
			var msg=document.createElement('div');
			msg.style.color='#0f0';
			msg.innerHTML="Server > connection closed by server.";
			msgContainer.appendChild(msg);
		};
		text.focus();
	}
	
	function getclass(_this,el){
		var lis = document.querySelectorAll(el);
		_this.style.background='#F3F';
		for(var i = 0; i < lis.length; i++){
			if(lis[i]!=_this){
				lis[i].style.background='#79F';
			}
		}
	}
	
	function getclass2(_this,el){
		var lis = document.querySelectorAll(el);
		_this.style.display='block';
		for(var i = 0; i < lis.length; i++){
			if(lis[i]!=_this){
				lis[i].style.display='none';
			}
		}
	}
	
	function login(){
		var msgObj = new Object();
		msgObj.name = username.value;
		msgObj.pass = pass.value;
		msgObj.type='login';
		var msg = JSON.stringify(msgObj);
		ws.send(msg);
	}
	
	function quit(){
		if(ws){
			ws.close();
			var msg=document.createElement('div');
			msg.style.color='#0f0';
			msg.innerHTML='Server > connection closed.';
			msgContainer.appendChild(msg);
			ws=null;
		}
	}
	
	function send(){
		var msgObj = new Object();
		var toopenid=document.getElementById('toopenid');
		msgObj.text = text.value;
		msgObj.type='text';
		msgObj.toopenid=toopenid.value;
		var msg = JSON.stringify(msgObj);
		
		ws.send(msg);
		var banerid=document.getElementById('baner_'+toopenid.value);
		var msg=document.createElement('div');
		msg.className='self';
		msg.innerHTML=text.value;
		banerid.appendChild(msg);
		setTimeout(function(){
			msgContainer.scrollTop=msgContainer.getBoundingClientRect().height;
		},100);
		text.value='';
		text.focus();
	}
	
	function ToUnicode(str) { 
		return escape(str).replace(/%/g,"\\").toLowerCase();
	}
	
	function UnUnicode(str) {
		 return unescape(str.replace(/\\/g, "%"));
	}
	
	function clearMsg(){
		msgContainer.innerHTML="";
	}
	
	function enter(event){
		if(event.keyCode==13){
			send(); 
		} 
	}
</script>
</body>
</html>